<template>
  <view>
    <!-- 内容主体 -->
    <view class="press-list">
      <view class="press-item" v-for="(item,index) in publishCommentList" :key="index" @click="pressItemClick(item)">
        <view class="display-default press-item-top">
          <!-- 用户头像 -->
          <image class="press-item-top-avatar"
            :src="item.avatar ? $url+item.avatar : '/static/myCenter/defaultAvatar.png'"></image>
          <!-- 用户昵称和咨询分类 -->
          <view class="press-item-top-userNameAndConsultName">
            <!-- 用户昵称 -->
            <text class="press-item-top-userName">{{item.username}}</text>
            <!-- 格式化后的发布时间 -->
            <view style="color: #7e7e7e;font-size: 11px;">
              <text>
                {{item.commentDateInterval}}
              </text>

              <uni-dateformat v-if="!item.commentDateInterval" :date="item.commentDate" format="yyyy-MM-dd">
              </uni-dateformat>

              <text>·评论帖子</text>
            </view>
          </view>
        </view>
        <!-- 咨询内容 -->
        <view class="press-item-centre">
          <!-- 文字 -->
          <view class="press-item-centre-content">
            <text>{{item.content}}</text>
          </view>
          <!-- 图片 -->
          <view class="press-item-centre-pressImg-list">
            <image class="press-item-centre-pressImg" style="width: 15%;" :src="$url+item.pressImages"
              mode="aspectFill"></image>
            <view style="display: flex;flex-direction: column;width: 82%;padding-left: 3% ;justify-content: center;">
              <text style="color: #7d7d7d;">{{item.pressUsername}}</text>
              <text class="astrict-text">{{item.pressContent}}</text>
            </view>
          </view>
        </view>

        <!-- 右上角3个点 【删除功能】 -->
        <view style="position: absolute;top: 0rpx;right: 0rpx;padding: 30rpx 30rpx 0 0;"
          @click="pressPopup(item.commentId)" @click.stop="!pressItemClick">
          <image style="width: 55rpx;height: 55rpx;-moz-transform: rotate(90deg);-webkit-transform: rotate(90deg);"
            src="/static/myPublish/options1.png">
          </image>
        </view>
      </view>
    </view>

    <!-- 删除选项弹出层 -->
    <uni-popup ref="pressPopup" type="bottom">
      <view class="pressDialog-popup-body">
        <view class="display-default select-press-item" @click="pressSelect('del')">
          <text style="color: red;">删除</text>
          <uni-icons style="position: absolute;right: 200rpx;left: 0;margin: auto;" custom-prefix="iconfont"
            type="trash" size="55rpx" color="red"></uni-icons>
        </view>
        <button class="pressDialog-button-cancel" @click="popupClose('pressPopup')">取消</button>
      </view>
    </uni-popup>

    <uni-load-more v-if="publishCommentList.length == 0" status="noMore" style="padding: 100rpx 0;"></uni-load-more>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 当前选择的CommentId
        currentSelectCommentId: '',
        // 用户已发表的所有评论
        publishCommentList: [],
        token: ''
      };
    },
    async onLoad() {
      uni.showLoading({
        title: '正在加载中...'
      })
      this.token = await uni.getStorageSync('token')

      await this.$http.user.getCommentAllInfoByUid(this.token).then(res => {
        // console.log("res: " + JSON.stringify(res));
        this.publishCommentList = res.data
      }).catch(err => {
        console.log("err: " + JSON.stringify(err));
      })

      uni.hideLoading()
    },
    async onShow() {
      // 每当页面显示时
      // 获取上一页面的返回消息体
      // 1. 从确定删除评论页面回来的
      if (uni.getStorageSync('isMyCommentViewBack')) {
        // 为真则重新刷新页面数据
        // 打开加载框
        uni.showLoading({
          title: '正在加载中...'
        })

        await this.$http.user.getCommentAllInfoByUid(this.token).then(res => {
          // console.log("res: " + JSON.stringify(res));
          this.publishCommentList = res.data
        }).catch(err => {
          console.log("err: " + JSON.stringify(err));
        })

        // 清空返回消息体
        uni.removeStorageSync('isMyCommentViewBack')
        // 关闭加载框
        uni.hideLoading()
      }
    },
    // 右上角按钮：去发布
    onNavigationBarButtonTap(e) {
      // 跳转发布页面
      uni.navigateTo({
        url: '/pages/selectPress/selectPress'
      })
    },
    methods: {
      /**
       * @description 咨询item项点击
       */
      pressItemClick(item) {
        // console.log("item: " + JSON.stringify(item));
        /**
         * 这里出现了错误！！
         * 这个错误直接导致上一页面还能正常显示发布时间，到详情页就消失 NaN
         * 错误回溯：
            url: `/pages/pressDetail/pressDetail?press=${JSON.stringify(item)}`
         * 正确写法：
            url: `/pages/pressDetail/pressDetail?press=${encodeURIComponent(JSON.stringify(item))}`
         * 最后根据字符串比较，发现传参过后时间内少了一个+号，导致NaN，所以传参json类型一定要用encodeURIComponent不然会出问题
         * encodeuricomponent可把字符串作为 URI 组件进行编码。可将一些特殊字符进行转义
         */
        uni.navigateTo({
          url: `/pages/pressDetail/pressDetail?pressId=${item.pressId}`
        })
      },

      /**
       * @description 打开弹出层 【编辑、删除】
       * @param pressId 咨询主键id
       */
      pressPopup(commentId) {
        // 当前选择的pressId
        this.currentSelectCommentId = commentId
        // 打开弹出层
        this.$refs.pressPopup.open()
      },

      /**
       * @description 取消弹出层 【编辑、删除】
       * @param name 弹出层的ref
       */
      popupClose(name) {
        if (name == 'pressPopup') {
          this.$refs.pressPopup.close()
        }
      },

      /**
       * @description 点击【编辑、删除】
       * 根据咨询pressId和用户uid，删除对应的咨询表t_press中的数据，删除对应的评论表，删除对应的咨询点赞表
       * @param name 弹出层的ref
       */
      pressSelect(name) {
        console.log("name: ", name);

        // 点击删除按钮
        if (name == 'del') {
          // 关闭弹出层
          this.$refs.pressPopup.close()
          // 打开自定义模态弹窗，询问用户是否继续删除。
          // 同时将当前选择的pressId带过去
          uni.navigateTo({
            url: `/pages/customPopup/customPopup?title=是否确定删除？&confirmText=确定&type=delComment&commentId=${this.currentSelectCommentId}`
          })
          return
        }
      },
    }
  }
</script>

<style lang="scss">
  // 列表容器
  .press-list {
    background: #fff;

    // 内容item项
    & .press-item {
      position: relative;
      display: flex;
      flex-direction: column;
      padding: 30rpx;
      border-top: 1px solid #f0f0f0;

      // 内容头部
      & .press-item-top {
        height: 80rpx;
        margin-bottom: 20rpx;
        justify-content: flex-start;

        // 头像
        & .press-item-top-avatar {
          width: 80rpx;
          height: 100%;
          border-radius: 60px;
          margin-right: 25rpx;
          background: #fff;
        }

        // 用户昵称和咨询分类名称的容器
        & .press-item-top-userNameAndConsultName {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          height: 100%;

          // 用户昵称
          & .press-item-top-userName {
            font-size: 17px;
            // font-weight: 700;
          }
        }
      }

      // 内容主体
      & .press-item-centre {
        // margin-bottom: 20rpx;

        // 内容
        & .press-item-centre-content {
          margin-bottom: 20rpx;
          font-size: 16px;
          word-break: break-word; //如果不想单词内断行可以进行单词间的断行
        }

        & .press-item-centre-pressImg-list {
          background: #fbfbfb;
          display: flex;
          align-items: center;
          position: relative;

          & .press-item-centre-pressImg {
            width: 120rpx;
            height: 120rpx;
          }
        }
      }
    }

    & .press-item:active {
      background: #f7f7f7;
    }
  }

  // 点击咨询右上角3个小点的弹出层选项
  .pressDialog-popup-body {
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    border-radius: 10px 10px 0 0;
    background: #fff;

    & .select-press-item {
      position: relative;
      font-size: 16px;
      padding: 30rpx;
    }

    & .pressDialog-button-cancel {
      background: #eee;
      margin-top: 20rpx;
      padding: 5rpx 0;
      font-size: 16px;
      width: 90%;
    }
  }
</style>
